<template>
    <h1 :blood="blood" @click="blood-=5">僵尸-{{ blood }}
        {{ blood<=0?'死亡':'活泼' }}
    </h1>
    <hr>
    <button @click="change1()" class="btn" :class="cArr">移动</button>
    <button @click="isActive=!isActive" class="btn" :class="{active:isActive,kkk:0}">移动2</button>
    <hr>
    <h1>动态style</h1>
    <button 
        @click="left+=10" 
        class="ball" 
        :style="{left:left+'px'}">向右移动
    </button>
</template>

<script setup>
import { ref } from 'vue';

let blood = ref(100);

//样式
let cArr = ref(['active'])
let change1 = ()=>{
    console.log(111);
    cArr = ref([])
}

let isActive = ref(true)

let left = ref(0)
</script>

<style scoped>
.btn{background-color: gray;color: black;}
.btn.active{background-color: yellow;color: purple;}

.ball{
    background-color: pink;
    position: fixed;
}
</style>